<template>
  <div class="page-container">
    <component :is="compList[state.page]" v-model="state" />
  </div>
</template>

<script setup lang="ts">
import { reactive, defineAsyncComponent } from "vue";
import type { songListType } from "@/types/pageTypes/songList.ts";
const state = reactive({
  page: "list" as "list" | "songs",
  songList: null as songListType | null,
});
const compList = {
  list: defineAsyncComponent(() => import("./components/list.vue")),
  songs: defineAsyncComponent(() => import("./components/songs.vue")),
};
</script>

<style scoped lang="less">

</style>
